<template>
  <a-modal
    :width="1200"
    title="项目信息"
    :visible="visible"
    :footer="false"
    @cancel="$emit('cancel')"
  >
    <a-tabs v-model="tabsSelValue" @change="tabsChange">
      <a-tab-pane v-for="(item, index) in tabsList"
      :key="item.key" :tab="item.title">
        <a-row class="modelPopupBox" v-if="tableColumns[item.tableKey].header">
          <template v-for="(itm, idx) in tableColumns[item.tableKey].header">
            <a-col :span="24" class="modelPopupTitle" v-if="itm.type == 'title'"
              :key="idx + item.tableKet + 'Title'">
              {{ itm.title }}
            </a-col>
            <a-col class="modelPopupList" v-else
             :span="itm.span || 12" :key="idx + item.tableKet + 'Other'">
              <div class="modelPopupListTxt modelPopupListTxt1">{{ itm.title }}</div>
              <div class="modelPopupListTxt modelPopupListTxt2">{{ itm.value }}</div>
            </a-col>
          </template>
        </a-row>
        <a-table bordered
         :columns="tableColumns[item.tableKey].table"
         :dataSource="tableData[item.tableKey]"></a-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import tableColumns from './js/tableColumns.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      tabsSelValue: 1,
      tabsList: [
        { title: '工程项目审计信息表', key: 1, tableKey: 'gcxmsjxxb' },
        { title: '历任项目领导班子及财务人员任职情况表', key: 2, tableKey: 'lrxmldbzjcwryrzqkb' },
        { title: '项目目标责任情况表', key: 3, tableKey: 'xmmbzrqkb' },
        { title: '人员情况统计表', key: 4, tableKey: 'ryqktjb' },
        { title: '项目效益情况表', key: 5, tableKey: 'xmxyqkb' },
        { title: '工程结算及收款明细表', key: 6, tableKey: 'gcjsjskmxb' },
      ],
      tableData: {
        gcxmsjxxb: [
          { name1: '建筑单位' },
          { name1: '建设单位' },
          { name1: '勘察单位' },
          { name1: '资金来源' },
          { name1: '设计单位' },
          { name1: '监理单位' },
          { name1: '工程类型' },
          { name1: '建筑面积' },
          { name1: '实际建筑面积' },
          { name1: '工程地址' },
          { name1: '投标金额' },
          { name1: '中标金额' },
          { name1: '业主预付款比例或金额' },
          { name1: '承包方式' },
          { name1: '合同工期', name3: '开工日期' },
          { name1: '合同工期', name3: '竣工日期' },
          { name1: '合同工期', name3: '合同总工期' },
          { name1: '责任目标内容', name3: '效益目标（%）' },
        ],
        lrxmldbzjcwryrzqkb: [
          { name1: '项目经理' },
          { name1: '执行经理' },
          { name1: '总工程师' },
          { name1: '生产经理' },
          { name1: '商务经理' },
          { name1: '机电经理' },
          { name1: '其他领导班子成员' },
          { name1: '财务人员' },
        ],
        xmmbzrqkb: [
          { name1: '效益目标（%）' },
          { name1: '工期目标' },
          { name1: '质量目标' },
          { name1: '安全文明目标' },
          { name1: '劳务管理目标' },
          { name1: '资金管理目标（含工程款回收率）' },
          { name1: '结算管理目标' },
          { name1: '技术管理目标' },
          { name1: '风险抵押金' },
          { name1: '物资损耗率' },
          { name1: '现场经费' },
          { name1: '档案管理' },
          { name1: '业主投诉' },
        ],
        ryqktjb: [
          { name1: '开工X年X月' },
          { name1: '开工X年X月' },
        ],
        xmxyqkb: [
          { xh: "一", name1: '计划收益' },
          { xh: "1", name1: '预计总收入' },
          { xh: "2", name1: '预计总成本' },
          { xh: "3", name1: '应缴税金' },
          { xh: "4", name1: '核定的目标收益率（%）' },
          { xh: "5", name1: '截至审计日的目标收益率（%）', name3: '目标收益率如有调整填列此行，并说明调整原因' },
          { xh: "二", name1: '至审计日账面收益' },
          { xh: "1", name1: '账面营业收入' },
          { xh: "2", name1: '账面实际成本' },
          { xh: "3", name1: '计提税金' },
          { xh: "4", name1: '账面利润' },
          { xh: "5", name1: '账面收益率' },
        ],
        gcjsjskmxb: [
          { name1: '' }
        ],
      },
      tableColumns,
    }
  },
  methods: {
    tabsChange() {

    },
  }
}
</script>

<style lang="less" scoped>
.modelPopupBox {
  border-top: 1px solid #dadada;
  border-right: 1px solid #dadada;
  .modelPopupTitle {
    padding: 5px 0;
    text-align: center;
    border: 1px solid #dadada;
    border-top-width: 0;
    border-right-width: 0;
    background-color: #F2F2F2;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-style: normal;
    font-size: 14px;
  }
  .modelPopupList {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dadada;
    border-top-width: 0;
    border-right-width: 0;
    &:last-child {
      border-bottom-width: 0;
    }
    .modelPopupListTxt {
      width: 50%;
      padding: 5px;
    }
    .modelPopupListTxt1 {
      background-color: #F2F2F2;
    }
    .modelPopupListTxt2 {
      background-color: #ffffff;
    }
  }
}
</style>